<template>
  <FCommonListPage>
    <el-tabs v-model="tabActive" class="default-form-list-tab" @tab-click="tabChange">
      <el-tab-pane label="应用管理" name="app" class="default-form-list-panel">
        <FCommonListPageSearchWrapper>
          <el-button style="margin: 10px 0 10px 10px" round type="primary" icon="plus"
                     @click="createApp">新建应用
          </el-button>
          <el-button style="margin: 10px 0 10px 10px" round icon="reload"
                     @click="reload">刷新
          </el-button>
        </FCommonListPageSearchWrapper>
        <AppList ref="refAppList"/>
      </el-tab-pane>
      <el-tab-pane class="default-form-list-panel" label="基础数据" name="baseData">
        基础数据
      </el-tab-pane>
    </el-tabs>

    <FModal width="600" header="应用" ref="appModal" @ok="doCreateApp">
      <el-form v-loading="loading" ref="appEditForm" label-width="120px"
               :model="appModel" style="padding-right: 50px">
        <el-form-item prop="appName" label="应用名称" :rules="[required]">
          <el-input v-focus v-model="appModel.appName"/>
        </el-form-item>
      </el-form>
    </FModal>
  </FCommonListPage>
</template>
<script setup>

import FCommonListPage from '@/components/layout/FCommonListPage.vue';
import FCommonListPageSearchWrapper from '@/components/layout/FCommonListPageSearchWrapper.vue';
import FModal from '@/components/FModal/index.vue';
import {required} from '@/utils/CommonUtils';
import {nextTick, reactive, ref, shallowRef, toRaw} from 'vue';
import AppList from '@/components/app/AppList.vue';
import {putAction} from '@/request/BaseRequest';

defineProps({
  name: 'PlatApp'
});

const refAppList = shallowRef();
const appModal = shallowRef();
const appEditForm = shallowRef();
const tabActive = shallowRef('app');
const loading = shallowRef(false);
const appModel = reactive({
  appName: undefined
});

function tabChange() {
}

function reload() {
  refAppList.value.search();
}

function doCreateApp() {
  appEditForm.value.validate((valid, errors) => {
    if (valid) {
      putAction('/plat/platApp/save', toRaw(appModel)).then(data => {
        loading.value = false;
        if (data.success) {
          refAppList.value.search();
          appModal.value.close();
          appEditForm.value.resetFields();
        }
      });
    }
  });
}

function createApp() {
  appModal.value.open();
  nextTick(() => {
    appEditForm.value.resetFields();
  });
}

</script>
